<template>
<div class="components-page">
  <div :id="item.divId" v-for="(item,index) in myChart" :key="index" class="circle-item"></div>
</div>
</template>

<script>
export default {
  data() {
    return {
      myChart: [{
          id: 1,
          data: 50,
          tital: '产能利用率',
          divId: 'myChartOne',
        },
        {
          id: 2,
          data: 60,
          tital: '均衡生产率',
          divId: 'myChartTwo',
        },
        {
          id: 3,
          data: 80,
          tital: '定额完成率',
          divId: 'myChartThree',
        },
        {
          id: 4,
          data: 10,
          tital: '次废品率',
          divId: 'myChartFour',
        },
      ],
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart.forEach((item) => {
        const myChart = this.$echarts.init(document.getElementById(item.divId));
        myChart.setOption({
          tooltip: {
            formatter: '{b} : {c}%'
          },
          series: [{
            name: item.tital,
            type: 'gauge',
            detail: {
              show: false
            },
            data: [{
              value: item.data,
              name: item.tital
            }],
            title: {
              offsetCenter: ['0%', '100%'], //设置完成率位置
              textStyle: { // 其余属性默认使用全局文本样式
                fontSize: 12,
                color: "white"
              },
            },
              pointer : { //指针样式
                      length: '45%'
                  },
            label: {
              textStyle: {
                fontSize: 6
              }
            },
            axisLine: { // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                width: 10
              },
            },
            axisTick: { // 坐标轴小标记
              length: 13, // 属性length控制线长
              lineStyle: { // 属性lineStyle控制线条样式
                color: 'auto'
              }
            },
            splitLine: { // 分隔线
              length: 18, // 属性length控制线长
              lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                color: 'auto'
              }
            },
          }]
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.components-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row wrap;

  .circle-item {
    width: 49%;
    height: 49%;
  }
}
</style>
